<style lang="less" scoped>
.cf {
  clear: both;
}
// .m-sech-wrap {
//   padding-right:0.2rem;
// }
</style>

<template>
  <div class="gridContainer">

    <div class="m-sech-wrap displayflex">
      <div class="flex1">
        <div class="m-sech-box displayflex">
          <i class="iconfont ft16 icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <input type="text" placeholder="输入业务单号" v-model="sechTxt">
          </div>
        </div>
      </div>
      <div class="m-sech-btn" @click="getData('searching')">搜索</div>
    </div>

    <div class="vuxTab">
      <tab bar-active-color="#23a5a5" defaultColor="#333333" active-color="#23a5a5" :line-width='2' v-model="tabNo">
        <tab-item @on-item-click="tabNo = 0">已完成</tab-item>
        <tab-item @on-item-click="tabNo = 1">异常</tab-item>
      </tab>
    </div>

    <scroller lock-x scrollbar-y use-pullup :height="scrollerHeight" @on-pullup-loading="getData" v-if="totalRecords > 0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div>
        <div class="acpt-list" v-for="(item, index) in datas">
          <div class="acpt-list-wrap mb30">
            <div class="acpt-list-head cf">
              <span class="txt f-l">业务单号：{{item.BBillNo}}</span>
              <span class="txt org f-r" v-if="tabNo == 0">{{item.State | PoState}}</span>
              <span class="txt org f-r" v-if="tabNo == 1">异常订单</span>
            </div>
            <div class="displayflex acpt-list-body lineb">
              <span class="cargo">
                <i class="iconfont icon-cargo"></i>
                <p>{{item.Pkgs}}件</p>
              </span>
              <div class="txt flex1">
                <p class="ft17">{{item.PickContacts}} {{item.PickContactsTel}}</p>
                <p>取货地址：{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}</p>
                <p>送货地址：{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</p>
                <p v-if="item.ExceptionMemo || item.Information">异常原因：{{item.ExceptionMemo || item.Information}}</p>
                <p>签收时间：{{item.ReceiveTime | timeshort}}</p>
              </div>
            </div>
            <div class="btn-grp txt-rit">
              <div class="btn ml10" @click="viewOrderDetail(item.BBillGuid)">详情</div>
              <div class="btn ml10" v-if="item.IsCCBB =='Y'" @click="carColdTrackingOrder(item.BBillNo)">冷链跟踪</div>
            </div>
          </div>
        </div>
      </div>
    </scroller>

    <div class="noDate_page" v-if="totalRecords == 0">
			<div class="noDate_icon"><i class="iconfont icon-null"></i></div>
			暂无数据
		</div>
    <div class="w100fix"></div>
    <footer-menu :status='2'></footer-menu>
  </div>
</template>

<script>
import footerMenu from "@/components/core/footer/manage.footer.vue";
import { mapGetters, mapState } from "vuex";

export default {
  components: {
    footerMenu, 
  },
  data(){
    return {
      sechTxt:'',
      datas:[],
      tabNo:-1,

      totalRecords:0,
      PageIndex: 1,
      PageSize: 8,
      noMore:false,
      ScrollerConfig: {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      }
    }
  },
  computed:{
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    }
  },
  watch:{
    tabNo(n,o){
      if(n !== o){
        this.PageIndex = 1;
        this.datas = [];
        this.totalRecords = 0;
        this.getData();
      }
    },
  },
  created(){
    this.tabNo = 0;
  },
  mounted(){
    this.$store.dispatch("cfg/setConHeight");
  },
  methods: {
    getData(type){
      if (type == 'searching') {
        this.PageIndex = 1;
        this.totalRecords = 0;
        this.datas = [];
        this.noMore = false;
      }

      let query = {
        BBillNo: this.sechTxt,
        DriverGuid: this.userinfo.StaffID,
        ExceptionMark: "N",
        StateList: ['56','81'],
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      };

      if(this.tabNo === 1){
        query.ExceptionMark = "Y";
      }

      this.Ajax.post("GetDriverOrderList", query).then(resp => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if (resp.Datas && resp.Datas.length > 0) {
            this.PageIndex++;
            this.datas = this.datas.concat(resp.Datas);
            this.ScrollControl();
          }
          console.log(this.datas);
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },

    viewOrderDetail(BBillGuid) {
      this.$router.push({
        path:'senddingdetailorder',
        query:{
          Guid: BBillGuid,
        }
      });
    },
    carColdTrackingOrder(BBillNo) {
      this.$router.push({
        path:'carColdTrackingOrder',
        query:{
          BBillNo: BBillNo,
        }
      });
    },

    ScrollControl() {
      if (this.totalRecords <= this.PageSize) {
        this.ScrollerConfig.content = "";
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if (this.datas.length > 0 && this.$refs.Scroller) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.datas.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>
